<template>
	<view class="gold-tab">
		<u-sticky bg-color="#fff" offset-top="0" h5-nav-height="0">
			<view class="topbar">
				<u-navbar title="" :border-bottom="false">
					<view class="search-bar">
						<input type="text" class="search" v-model="keywords" placeholder="请输入你的需求" />
						<u-icon class="icon" name="search" color="#919191" size="28"></u-icon>
					</view>
					<view slot="right" class="text-primary btn" @click="getSearch">搜索</view>
				</u-navbar>

				<u-tabs :list="list" :is-scroll="false" bar-width="80" :current="current" @change="change" bg-color="#fff"
				 active-color="#000"></u-tabs>
			</view>
		</u-sticky>

		<!-- 服务 -->
		<view class="list" v-show="current==0">
			<my-service :img="i.thumbnail" :title="i.product_name" :price="i.price" :exact="i.exact_price" :unit="i.unit" :rate="i.score"
			 :tags="i.merchant.tags" v-for="i in product" :key="i.id" :self="i.merchant.is_self" @click.native="$goto('/pages/service/detail?id=' + i.id)">
				<template v-slot:mid>
					<view class="flex-row justify-between align-center">
						<view class="my-order-sub">{{i.merchant.merchant_name}}</view>
						<view class="my-order-btn on">免费咨询</view>
					</view>
				</template>
			</my-service>
		</view>

		<!-- 案例 -->
		<view class="list" v-show="current==1">
			<my-case :img="i.thumbnail" :title="i.case_name" :subTitle="i.desc" :tags="i.merchant.tags" v-for="i in cases" :key="i.id"
			 :company="i.merchant.merchant_name" @click.native="$goto('/pages/case/detail?id=' + i.id)">
			</my-case>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				cate: '',
				agent: '',
				keywords: '',
				list: [{
					name: '服务'
				}, {
					name: '案例'
				}],
				current: 0,
				product: [],
				cases: []
			};
		},
		onLoad(opt) {
			this.cate = opt.cate || ''
			this.agent = opt.agent || ''
			this.getSearch()
		},
		methods: {
			change(index) {
				this.current = index;
				this.getSearch()
			},
			getSearch() {
				if (this.current == 0) {
					this.getProduct();
				} else if (this.current == 1) {
					this.getCase();
				}
			},
			getProduct() {
				this.product = []
				this.$u.get('/product/list?category_id=' + this.cate + '&agent=' + this.agent + '&keywords=' + this.keywords).then(
					res => {
						this.product = res.data.result.product
					})
			},
			getCase() {
				this.cases = []
				this.$u.get('/merchant/case/list?category_id=' + this.cate + '&agent=' + this.agent + '&keywords=' + this.keywords)
					.then(res => {
						this.cases = res.data.result.case
					})
			}
		}
	}
</script>

<style lang="scss">
	.topbar {
		background: #fff;

		.btn {
			padding-right: 24rpx;
		}
	}

	.search-bar {
		position: relative;

		.search {
			width: 540rpx;
			height: 64rpx;
			background: rgba(232, 232, 232, 1);
			border-radius: 8rpx;
			padding: 0 16rpx;
			font-size: 24rpx;
		}

		.icon {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>
